<template>
    <div>
        <!-- 使用transiton组件
          要想让那个元素/组件有动画,就需要使用transition内置组件包裹对应的元素/组件
        -->
        <img src="" alt="">
        <button @click="show = !show">是否显示p元素</button>
        <!-- <Transition name="ws">
            <p v-if="show">我是p元素</p>
        </Transition> -->

        <Transition name="hhh">
            <p v-if="show">我是p元素</p>
        </Transition>

    </div>
</template>

<script>
// 被transition包裹的组件, 默认会在进场(显示dom)或离场阶段自动添加类名
// v-enter-active  v-enter-to
// v-leave=active  v-leave-to

// 注意点: 当有多个动画的时候, 为了区分动画类型, 就不能使用默认类名了, 需要设置私有类名
// 给 Transition 组件 添加name 属性 , 最后类名都是以name属性开头的
// ws-enter-active   ws-enter-to  .... 

export default {
    data() {
        return {
            show: false // 默认不显示
        }
    }
}
</script>
<style scoped>
/* p {
    background-color: red;
    width: 200px;
    height: 200px;
    transform: rotateZ(45deg);

} */

.ws-enter-active,
.ws-leave-active {
    transition: all 10s ease;
}

.ws-enter-from,
.ws-leave-to {
    background-color: black;
    width: 50px;
    height: 50px;
    transform: rotateZ(0deg);
}

.hhh-enter-active {
    transition: all 0.3s ease-out;
}

.hhh-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.hhh-enter-from,
.hhh-leave-to {
    transform: translateX(20px);
    opacity: 0;
}
</style>